<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" top="5vh" @close.native="cancel" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="160px">
        <el-form-item label="共享资源名称：" prop="title">
          <el-select v-model="form.title" filterable placeholder="请选择" style="width: 100%" :disabled="isLook=='look'" @change="changeSelect">
            <el-option v-for="item in allAppoint" :key="item.id" :label="item.title" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="contractNum">
          <template slot="label">
            <span>服务合同(协议)编号</span>
            <el-tooltip class="item" effect="dark" content="按管理单位所定规则产生的共享服务合同(协议)编号" placement="top">
              <i class="el-icon-question" style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.contractNum" placeholder="请输入" :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="taskTitle">
          <template slot="label">
            <span>课题(任务)名称</span>
            <el-tooltip class="item" effect="dark" content="用户利用共享资源所支撑的课题名称" placement="top">
              <i class="el-icon-question" style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.taskTitle" placeholder="请输入" :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item label="课题(任务)性质：" prop="property">
          <el-radio-group v-model="form.property" :disabled="isLook=='look'">
            <el-radio label="科研性质" name="科研性质"></el-radio>
            <el-radio label="非科研性质" name="非科研性质"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务起始时间：" prop="startTime">
          <el-date-picker style="width:100%" v-model="form.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
            :disabled="isLook=='look'">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="服务结束时间：" prop="endTime">
          <el-date-picker style="width:100%" v-model="form.endTime" :disabled="isLook=='look'" type="date" value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="content">
          <template slot="label">
            <span>实际服务内容</span>
            <el-tooltip class="item" effect="dark" content="共享资源向用户实际提供的服务项目，如样品测试、分析检测等" placement="top">
              <i class="el-icon-question" style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.content" placeholder="请输入" type="textarea" :rows="4" :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="amount">
          <template slot="label">
            <span>实际服务量</span>
            <el-tooltip class="item" effect="dark" content="共享子实际提供的服务，一般为机时（含必要的准备时间、测试时间和后处理时间，不包括空载运行时间，计量单位为小时）或数量（使用次数、样品测试数量、分析检测数量、技术指导次数等）"
              placement="top">
              <i class="el-icon-question" style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.amount" placeholder="请输入" type="textarea" :rows="4" :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item label="服务金额(万元)：" prop="money">
          <el-input v-model="form.money" placeholder="请输入" :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="companyName">
          <template slot="label">
            <span>用户单位</span>
            <el-tooltip class="item" effect="dark" content="使用共享资源的用户单位名称，与服务合同（协议）保持一致" placement="top">
              <i class="el-icon-question" style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.companyName" placeholder="请输入" :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model="form.contactName" placeholder="请输入" :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item label="联系方式" prop="contactPhone">
          <el-input v-model="form.contactPhone" placeholder="请输入" :disabled="isLook=='look'" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="isLook!=='look'">确 定</el-button>
        <el-button @click="
          cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAppointmentList
} from '@/api/yqgx/appointment'
import {
  addService,
  // getServiceById,
  updateService,
} from '@/api/yqgx/service'
export default {
  data() {
    return {
      allAppoint: [],
      dialogVisible: false,
      isLook: '',
      accept: '*',
      title: '',
      form: {
        title: '',
        contractNum: '',
        taskTitle: '',
        property: '',
        startTime: '',
        endTime: '',
        content: '',
        amount: '',
        money: '',
        companyName: '',
        contactName: '',
        contactPhone: '',
      },
      facilityType: ['政策法规', '管理制度'],
      file: null,
      rules: {
        title: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        contractNum: [{ required: true, message: '不能为空！', trigger: 'blur' }],
        taskTitle: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        property: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
      }
    }
  },
  created() {
  },
  methods: {
    show(obj) {
      getAppointmentList().then((res) => {
        this.allAppoint = res.data.filter(item => item.answer)
      })
      this.dialogVisible = true
      this.title = obj.title
      this.isLook = obj.isLook
      if (obj.data) {
        this.form = Object.assign(obj.data)
        // articleDetail({ articleId: obj.data.articleId }).then(res => {
        //   this.form = res.data
        // })
      }
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateService(this.form).then(() => {
              this.cancel()
            })
          } else {
            addService(this.form).then(() => {
              this.cancel()
            })
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.isLook = false
      this.file = null
      this.$emit('close')
    },
    handleChange(file) {
      this.file = file.raw
      this.form.fileName = file.name
    },
    // 多次上传覆盖
    handleExceed(file) {
      console.log('[ file ] >', file)
      this.$refs.uploadRef.clearFiles()
      // this.handleChange(file[0])
      this.file = file[0]
      this.form.fileName = file[0].name
    },
    downloadLink(item) {
      this.downloadByUrl(item.fileName, item.filePath)
    },
    closeFile() {
      this.file = null
      this.$refs.uploadRef.clearFiles()
    },
    changeSelect(item) {
      console.log('%c [ item ]-204', 'font-size:13px; background:pink; color:#bf2c9f;', item)
      this.form.title = item.title
      this.form.contractNum = item.contractNum
      this.form.contactName = item.applyName
      this.form.taskTitle = item.name
      this.form.property = item.property
      this.form.startTime = item.startTime
      this.form.endTime = item.endTime
      // this.form.contactName = item.evaluator
      this.form.companyName = item.companyName
      this.form.contactPhone = item.applyPhone
    }
  }
}
</script>

<style lang="less" scoped>
  :deep(.el-table .cell) {
    font-size: 16px;
  }
  :deep(.el-table th > .cell) {
    font-size: 18px;
  }
</style>
